<template>
	<section>
		<div class="screen fixed_u" :class="{top_import:!isHerde}">
			<ul class="screen_all plr30 w100  hei100  flex_middle  flex_between wallfff  mud10">
				<li v-for="(item,index) in sort" data-id="item.type" class="pud20" :class="{active:item.boole}" v-html="item.text" @click="getItem(item),upTransmit(item)">	
				</li>
				<li class="pud20" @click="changShow()" :class="{active:Show}" >筛选<i class="iconfont icon-shaixuan"></i></li> 
			</ul>
			<div class="select_div" v-show="Show">
				<ul class="auto_ul"> 
					<dl class="flex_wrap one_type">
						<dt class="w100">车型</dt>
						<dd v-for="(item,index) in vehicle" data-id="item.id" data-i="0"  :class="{'active':index===Vehindex}" @click="clickVehicle(item,index)" :data-Type="item.CarType_ID">{{item.CarType_Name}}</dd>
					</dl>
					<!---->
					<dl class="flex_wrap one_type">
						<dt class="w100">品牌</dt>
						<!--<p class="w100  letter flex_middle  flex_between"><a class="lerA">A</a><a>B</a><a>C</a><a>D</a><a>E</a><a>F</a><a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a>
							<a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a>
							<a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
						</p>-->
						<div class="scrollBar flex_wrap"> 
							<dd v-for="(item,index) in brand" data-id="item.id" data-i="1"  :class="{'active':index===Brandindex}" @click="clickBrand(item,index)" :data-CarBrand="item.CarBrand_ID">{{item.CarBrand_Name}}</dd>
						</div> 
					</dl>
					
					
					<dl class="flex_wrap one_type">
						<dt class="w100">价格</dt>
						<dd v-for="(item,index) in price" data-id="item.id" data-i="2"   :class="{'active':index===Priceindex}" @click="clickPrice(item,index)" >{{item.name}}</dd>
					</dl> 
					
				</ul>
				 <p class="clickBut hei100 w100"><a @click="clickEmpty()">清空</a><a class="bagdf" @click="moveSelect(),changShow()">确定</a></p>
			</div>
		</div>
		<div class="layer" v-show="Show">
			<!--遮罩-->
		</div>
	</section>
	
</template>

<script>
	export default{
		name:'screen',
		props: {
		    message:{
		        type:Number,
		        default:1 //这样可以指定默认的值
		    }
		},
		data(){
			return{
				Show:false,
				sort:[
					{
						text:'综合排序',
						boole:true,
						type:'empty'
					},
					{
						text:'价格最高',
						boole:false,
						type:'PriceDesc'
					},
					{
						text:'价格最低',
						boole:false,
						type:'PriceAsc'
					} 
				],
				vehicle:"", 
				brand:"",
				price:[
					{
						name:'5万以下',
						StartPrice:'0',
						EndPrice:'50000'
					},
					{
						name:'5-8万',
						StartPrice:'50001',
						EndPrice:'80000'
					},
					{
						name:'8-12万',
						StartPrice:'80001',
						EndPrice:'120000'
					},
					{
						name:'12-18万',
						StartPrice:'120001',
						EndPrice:'180000'
					},
					{
						name:'18-25万',
						StartPrice:'180001',
						EndPrice:'250000'
					},
					{
						name:'25-40万',
						StartPrice:'250001',
						EndPrice:'400000'
					},
					{
						name:'40-80万',
						StartPrice:'400001',
						EndPrice:'800000'
					},
					{
						name:'80万以上',
						StartPrice:'800001',
						EndPrice:'100000000'
					}
				],
				Vehindex:'',//点击车型索引
				Brandindex:'',//点击品牌索引
				Priceindex:'',//点击价格索引 
				OrderType:'',//价格排序
				CarType:'',//获取车类型
				CarBrand:'',//获取车品牌
				StartPrice:'',//起始金额
				EndPrice:'',//结束金额
				mycars: {},
				isHerde:true
				 
			}
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.isHerde=this.$store.state.Type;
		},
		mounted:function(){
			this.GetCarType();
			this.GetCarBrand();
		},
		methods:{
			changShow:function(){//切换显示筛选条件
				this.Show=!this.Show
				this.sort.filter(function(arr){
					arr.boole=false;
				})
			},
			getItem:function(item){//综合排序添加active
				this.sort.filter(function(arr){
					arr.boole=false;
				})
				item.boole=true;
				this.Show=false;
			},
			clickVehicle:function(item,index){//筛选条件点击获取 
				this.Vehindex=index;
				this.CarType=item.CarType_ID; 
				this.mycars.CarType = this.CarType; 
			},
			clickBrand:function(item,index){ //筛选条件点击获取 
				this.Brandindex=index; 
				this.CarBrand=item.CarBrand_ID;
				this.mycars.CarBrand = this.CarBrand; 
			} ,
			clickPrice:function(item,index){ //筛选条件点击获取 
				this.Priceindex=index;
				this.itemdata=item; 
				this.mycars.StartPrice =this.itemdata.StartPrice;
				this.mycars.EndPrice =this.itemdata.EndPrice; 
			},
			clickEmpty:function(){
				this.Vehindex='';
				this.Brandindex='';
				this.Priceindex='';
				this.CarType='';
				this.CarBrand='';
				this.StartPrice='';
				this.EndPrice='';
				this.mycars={};
			},
			upTransmit:function(item){//向父页面传输数据
				if(item.type=="empty"){
					this.mycars={};
					this.$emit('getData',this.mycars);
				}else{
					this.OrderType=item.type; 
					this.mycars.OrderType=this.OrderType;
					this.$emit('getData',this.mycars);
				}
			},
			moveSelect:function(){ 
				
				this.$emit('getData',this.mycars);
			},
			//获取汽车型号
			GetCarType:function(){
				this.$http.get(this.urls + "/V1.0/GetCarType").then((res) => { 
					this.vehicle=res.data.Return_Data;
				}).catch((err) => {
					 console.log(err);
				});
			},
			//获取汽车品牌
			GetCarBrand:function(){
				this.$http.get(this.urls + "/V1.0/GetCarBrand").then((res) => { 
					this.brand=res.data.Return_Data;
				}).catch((err) => {
					 console.log(err);
				});
				
			}
		}
		
	}
</script>

<style scoped>
	.top_import{
		top: 0 !important;
	}
	.screen{
		width: 100%;
		top:1.3333333333rem;
		background-color: #F2F2F2; 
	} 
	.screen_all li{
		color: #666666;
		font-size: 0.3733333333rem;
	}
	.screen_all li.active{
		color: #333333;
		font-weight: 600; 
	}
	
	.select_div{
		height:8.5rem; 
	}
	.auto_ul{
		overflow-y: auto;
		height: 100%;
		padding-bottom: 0.2666666666rem;
	}
	.one_type dt{
		font-size: 0.3733333333rem;
		color: #666666;
		height: 1.0666666666rem;
		padding-left: 0.6666666666rem;
		line-height:1.3333333333rem;
	}
	.one_type dd{
		width: 20%;
		text-align: center;
		background-color: #fff;
		font-size: 0.32rem;
		padding: 0.4rem 0;
	 	border-right:0.5px solid #eeeeee;
		border-top:0.5px solid #eeeeee;
		border-bottom:0.5px solid #fff;
		border-left:0.5px solid #fff; 
	}
	.one_type dd.active{
		border: 0.5px solid #ffb3b3;
		background-color: #ffe7e7;
		color: #df4444;
		font-weight: 600;
	}
	.letter{
		background-color: #fff;
		height: 0.6666666666rem;
		padding:0 0.4rem;
		line-height: 0.6666666666rem;
		color: #999999;
		font-size: 0.3733333333rem; 
	}
	.letter .lerA{
		color: #333;
		font-weight: 600;
	}
	.scrollBar{
		width: 100%;
	}
	.clickBut{
		/*margin-top: 1.4666666666rem;*/
	}
	.clickBut a{
		display: inline-block;
		height: 100%;
		text-align: center;
		line-height:1.3333333333rem;
		width: 50%;
		font-size: 0.3733333333rem;
		background-color: #fff;
	}
	
	.clickBut a.bagdf{
		background-color: #DF4444;
		color: #fff;
	}
	.layer{
		position:fixed;
		top: 0;
		left:0;
		background: rgba(0,0,0,0.3);
		z-index: 10;
		width: 100%;
		height: 100%; 
	}
	
</style>